<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-07 20:16:24
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-11 23:21:32
 * @FilePath: \vprisk10.14\src\components\ca\table\complexTable.vue
 * @Description: 复杂表格组件
-->
<template>
<div>
    <div id="table" v-if="!tableShow">
        <!-- <table-left :xJson="xJson" :yJson='yJson' :tableValue="tableValue" :readonly="readonly" class="l-t" v-if="xJson.length>0&&yJson.length>0" @expendShow="expendShow"></table-left> -->
        <table-left :xJson="xJson" :yJson='yJson' :tableValue="tableValue" :readonly="readonly" class="l-t" v-if="xJson.length>0&&yJson.length>0"></table-left>
        <table-right ref="right" :yJson='yJson' :xJson="xJson" :tableValue="tableValue" :readonly="readonly" class="r-t" v-if="yJson.length>0&&xJson.length>0" ></table-right>
    </div>
      <el-dialog
      v-dialogDrag
      title="静因表格"
      :visible.sync="tableShow"
      width="60%"
      append-to-body
    >
     <div id="table">
        <!-- <table-left :xJson="xJson" :yJson='yJson' :tableValue="tableValue" :readonly="readonly" class="l-t" v-if="xJson.length>0&&yJson.length>0" @expendShow="expendShow"></table-left> -->
        <table-left :xJson="xJson" :yJson='yJson' :tableValue="tableValue" :readonly="readonly" class="l-t" v-if="xJson.length>0&&yJson.length>0"></table-left>
        <table-right :yJson='yJson' :xJson="xJson" :tableValue="tableValue" :readonly="readonly" class="r-t" v-if="yJson.length>0&&xJson.length>0"></table-right>
     </div>
    </el-dialog>
  
</div>
</template>

<script>
import tableLeft from './left';
import tableRight from './right';
    export default {
        components:{tableLeft,tableRight},
        props:{
            xJson:{
                type:Array,
                default:()=>{return[]}
            },
            yJson:{
                type:Array,
                default:()=>{return[]}
            },
            tableValue:{
                type:Array,
                default:()=>{return[]}
            },
            readonly:{
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                tableShow:false
            }
        },
        methods:{
            expendShow(){
                this.tableShow = !this.tableShow
            },
            // importFile(){
            //     this.$emit(importFile,true)
            // },
            // importFiled(){
            //     this.$emit(importFiled,true)
            // }
            // getTotal(val){
            //     this.$emit("getTotal",val)
            // }
        }
    }
</script>

<style lang="scss" scoped>
#table{
    display: flex;
    overflow: auto;
    width: 100%;
}
/deep/.el-dialog__body {
    min-height: 400px;
}
</style>